<template>
	<view>
		<u-navbar
			title="物流情况"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<template v-if="loading">
				<view style="padding: 32rpx;">
					<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="7" v-for="i in 6" :key="i"></u-skeleton>
				</view>
			</template>
			<template v-else>
				<view class="logistics-box">
					<view class="logistics-title" style="padding-bottom: 16rpx;">
						<text class="logistics-title-l">运单号:</text>
						<text class="logistics-title-r">{{detail.expressNo}}</text>
					</view>
					<view class="logistics-title">
						<text class="logistics-title-l">快递公司:</text>
						<text class="logistics-title-r">{{detail.expressCompany}}</text>
					</view>
				</view>
				<view style="height: 16rpx;"/>
				<view class="logistics-box">
					<u-steps dot current="0" direction="column">
						<u-steps-item :title="step.acceptStation" :desc="step.acceptTime" v-for="(step, index) in logisticsInfo" :key="index">
						</u-steps-item>
					</u-steps>
				</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import {getLogistics} from '@/api/me.js';
	export default {
		data() {
			return {
				loading: true,
				logisticsInfo: [], // 物流追踪
				detail: {},
				
			}
		},
		computed: {
			...mapState(['appInfo']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			}
		},
		onLoad({id}) {
			this.loading = true
			getLogistics({id}).then(res => {
				this.logisticsInfo = res.result.traces.reverse();
				this.detail = res.result;
			}).finally(() => {
				this.loading = false;
			});
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.scroll-list {
		@include flex(column);
	}
	
	.logistics-box {
		padding: 32rpx;
		background-color: #fff;
		.logistics-title {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			line-height: 28rpx;
			.logistics-title-l {
				color: #666;
				padding-right: 8rpx;
			}
			.logistics-title-r {
				color: #333;
			}
		}
		.tj-item {
			width: 160rpx;
			height: 160rpx;
			position: relative;
			.count {
				position: absolute;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, .5);
				color: #fff;
				font-size: 28rpx;
				line-height: 28rpx;
				padding: 8rpx 16rpx;
			}
		}
	}
</style>